import React, { useState, useEffect } from 'react';
import instance from '../utils/axios'
import tool from '../utils/format'
import { Goback } from './Goback';
import { Toast } from 'react-weui';
import styled from 'styled-components'

const Box = styled.div`
.index{
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.head{
    height: 40px;
    width: 100%;
    background-color: #dd3635;
    display: flex;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
}
.content_info{
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}



.back_btn{
    color: #ffffff;
    font-size: 16px;
}

.back_btn::before{
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 3px solid #ffffff;
    border-top: 3px solid #ffffff;
    transform: rotate(-45deg);
}


.foot{
    height: 40px;
    width: 100%;
    border-top: 1px solid #c4c4c4;
    display: flex;
}

.cbox{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

.coll_btn{
    display: inline-flex;
    font-size: 12px;
    color: #dd3635;
    align-items: center;
}

.coll_btn::before{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../images/coll2.png) no-repeat;
    background-size: contain;
    margin-right: 5px;
}

.cancel_btn{
    display: inline-flex;
    font-size: 12px;
    color: #dd3635;
    align-items: center;
}

.cancel_btn::before{
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../images/coll1.png) no-repeat;
    background-size: contain;
    margin-right: 5px;
}

.titlebox{
    box-sizing: border-box;
    padding: 12px 0;
}

.titlebox>h1{
    font-size: 24px;
    color: #222222;
}

.infoitem{
    box-sizing: border-box;
    padding: 5px 0;
    display: flex;
    align-items: flex-end;
}

.source{
    color: #222222;
    font-size: 16px;
    margin-right: 8px;
    line-height: 20px;
}
.pubtime{
    font-size: 14px;
    color: #a5a5a5;
    line-height: 15px;
}

.infobox>p.one-p{
    font-size: 16px;
    color: #222222;
    margin-bottom: 10px;
}

.infobox>p.one-p img{
    width: 100%;
}  
.img_wrapper>img{
    width: 100%;
}
`

const NewsInfo = (props) => {
    const [info, setInfo] = useState({});
    const [flag, setFlag] = useState(false);
    const [show, setShow] = useState({ icon: 'loading', context: '加载中', flag: false });

    let user = JSON.parse(localStorage.getItem('user'))

    useEffect(() => {
        instance.post('newsinfo', { newsid: props.match.params.id }).then((data) => {
            setInfo(data);
        })

        if (user) {
            instance.post('checkcollect', {
                newsid: props.match.params.id,
                uid: user._id
            }).then(data => {
                setFlag(data)
            })
        }
    }, [])

    function showToast(show) {
        setShow(show)
        setTimeout(() => {
            setShow({ icon: 'loading', context: '加载中', flag: false })
        }, 3000)
    }

    function cancle() {
        instance.post('cancelCollect', {
            aid: props.match.params.id,
            uid: user._id
        }).then(res => {
            setFlag(false)
        })
    }

    function collect() {
        if (user) {
            instance.post('collect', {
                aid: props.match.params.id,
                uid: user._id
            }).then(res => {
                setFlag(true)
            })
        } else {
            setShow({ icon: 'warn', context: '请先登录', flag: true })
            setTimeout(() => {
                setShow({ icon: 'loading', context: '加载中', flag: false });
                props.history.replace('/login')
            }, 1500)
        }

    }

    return (
        <><Box>
            <div className="index">
                <div className="head">
                    <Goback></Goback>
                    {/* <a className="back_btn" onClick={()=>{props.history.goBack()}}>返回</a> */}
                </div>
                <div className="content_info">

                    <div className="titlebox">
                        <h1>{info.title}</h1>
                        <div className="infoitem">
                            <span className="source">
                                来源：{info.type === '财经' ? info.media : info.source}
                            </span>
                            <span className="pubtime">{tool.toYMDhms(info.type === '财经' ? info.pubtime : info.time)}</span>
                        </div>
                    </div>

                    <div className="infobox" dangerouslySetInnerHTML={{ __html: info.type === '财经' ? info.content : info.context }}>
                    </div>
                </div>
                <div className="foot">
                    <div className="cbox">
                        {flag ? <a className="cancel_btn" onClick={cancle}>取消收藏</a> : <a className="coll_btn" onClick={collect}>收藏</a>}
                        {/* <a className="cancel_btn">取消收藏</a> */}
                    </div>
                </div>
            </div>
            <Toast icon={show.icon} show={show.flag}>{show.context}</Toast>
            {/* {renderRoutes(props.route.routes)} */}
        </Box></>

    )
}

export default NewsInfo


